<div class="result-info" layout="row" layout-align="space-between center" layout-xs="column" layout-align-xs="start start">
    <div>
        <span class="md-title" translate="SEARCH.USERS">Users</span>
        <span class="secondary-text">
            <span>87</span>
            <span translate="SEARCH.RESULTS">Results</span>
        </span>
    </div>

    <div class="pager">
        <span class="secondary-text">
            <span translate="SEARCH.RESULTS">Results</span>
            <span>:</span>
        </span>

        <span class="page-info">
            <span>1</span>
            <span>-</span>
            <span>10</span>
            <span translate="SEARCH.OF">of</span>
            <span>100</span>
        </span>

        <md-button class="md-icon-button" aria-label="previous page" translate
                   translate-attr-aria-label="SEARCH.PREVIOUS_PAGE">
            <md-icon md-font-icon="icon-chevron-left"></md-icon>
        </md-button>

        <md-button class="md-icon-button" aria-label="next page" translate translate-attr-aria-label="SEARCH.NEXT_PAGE">
            <md-icon md-font-icon="icon-chevron-right"></md-icon>
        </md-button>

    </div>
</div>

<table class="results simple clickable" ms-responsive-table>
    <thead>
        <tr>
            <th translate="SEARCH.NAME">Name</th>
            <th translate="SEARCH.POSITION">Position</th>
            <th translate="SEARCH.OFFICE">Office</th>
            <th class="text-right" translate="SEARCH.AGE">Age</th>
            <th class="text-right" translate="SEARCH.START_DATE">Start Date</th>
            <th class="text-right" translate="SEARCH.SALARY">Salary</th>
            <th class="text-left" translate="SEARCH.EMAIL">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="result-item user" ng-repeat="user in vm.users">
            <td class="name">{{user.name}}</td>
            <td class="position">{{user.position}}</td>
            <td class="office">{{user.office}}</td>
            <td class="age text-right">{{user.age}}</td>
            <td class="start-date text-right">{{user.startDate}}</td>
            <td class="salary text-right">{{user.salary | currency}}</td>
            <td class="email text-left">{{user.email}}</td>
        </tr>
    </tbody>
</table>

<div class="simple-pagination">
    <md-button class="pagination-item disabled" md-no-ink ng-href="#" aria-label="Go to previous page" translate
               translate-attr-aria-label="SEARCH.GO_TO_PREVIOUS">
        <md-icon md-font-icon="icon-chevron-left"></md-icon>
    </md-button>

    <md-button class="pagination-item active" md-no-ink ng-href="#" aria-label="Go to page 1">
        <span>1</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 2" hide-xs>
        <span>2</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 3" hide-xs>
        <span>3</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 4" hide-xs>
        <span>4</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 5" hide-xs>
        <span>5</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 6" hide-xs>
        <span>6</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 7" hide-xs>
        <span>7</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 8" hide-xs>
        <span>8</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 9" hide-xs>
        <span>9</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to page 10" hide-xs>
        <span>10</span>
    </md-button>

    <md-button class="pagination-item" ng-href="#" aria-label="Go to next page" translate
               translate-attr-aria-label="SEARCH.GO_TO_NEXT">
        <md-icon md-font-icon="icon-chevron-right"></md-icon>
    </md-button>
</div>
